<template>
	<div>
		<div class="personal">
			<div class="p_head" :style="{'background':`url(${userinfo.bgImg})`}">
				<a href="###">
					<div style="float: left;margin-left: 50px;">
						<img :src="userinfo.userImg==null?default_img:`${baseUrl}/${userinfo.id}/${userinfo.userImg}`" alt="">
					</div>
				</a>
				
				<div style="float: left;width: 200px;margin-left: 20px;display: flex;flex-direction: column;justify-content: center;font-size: 30px;">
					<span style="color: white;">{{userinfo.userName}}</span>
					
					<span style="font-size: 20px;">user</span>
				</div>
				<div v-if="$route.query.userId == this.$store.getters['user/id']" style="float: right;margin-right: 50px;">
					<a @click="toSetting" style="text-decoration: none;font-size: 150px;color: white;" href="###" class="iconfont icon-shezhi"></a>
				</div>
				
				<div class="changeBox">
					<a  @click="showUploads" href="###">
						<span class="iconfont icon-shangchuan">Uploads</span>
					</a>
					<a  @click="showCollections" href="###">
						<span class="iconfont icon-shoucang"> Collections </span>
					</a>
				</div>
			</div>
			<keep-alive>
				<router-view></router-view>
			</keep-alive>
			
		</div>
	
	</div>
	
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		name:'personal',
		data(){
			return{
				//用户默认头像
				default_img:require('../static/default-avatar.jpg'),
				//默认背景图片
				default_bg:require('../static/wallhaven-49qd8w.jpg'),
				baseUrl:'http://127.0.0.1:5000',
				
				userinfo:{
					id:'',
					userImg:'',
					bgImg:'',
					userName:'',
				}
			}
		},
		
		mounted(){
			//做用户判断,进入用户信息页面判断是自己的，还是他人的信息页面,
			//当进入信息页面时,根据上一个页面传递的用户id判断是否为自身.
			if(this.$route.query.userId == this.$store.getters['user/id']){
				this.userinfo.id=this.$store.getters['user/id']
				this.userinfo.userName = this.$store.getters['user/userName']
				this.userinfo.userImg = this.$store.getters['user/userImg']
				this.userinfo.bgImg = this.$store.getters['user/bgImg']
				if(this.userinfo.bgImg==null){
					// this.default_bg = `${this.baseUrl}/${this.userinfo.id}/${this.userinfo.bgImg}`
					this.userinfo.bgImg = this.default_bg
				}else{
					this.userinfo.bgImg = `${this.baseUrl}/${this.userinfo.id}/${this.userinfo.bgImg}`
				}
			}else{
				this.userinfo.id = this.$route.query.userId
				this.$api.commonApi.getOtherInfo(this.userinfo.id).then((res)=>{
					if(res.status ==200&&res.data.status==200){
						this.userinfo.userImg = res.data.userImg
						this.userinfo.bgImg = `${this.baseUrl}/${this.userinfo.id}/${res.data.bgImg}`
						this.userinfo.userName = res.data.userName
					} 
				})
				
			}
			
		},
		
		watch:{
			'$route.query.userId'(newValue,oldValue){
				this.userinfo.id= this.$route.query.userId
				if(this.$route.query.userId == this.$store.getters['user/id']){
					this.userinfo.id=this.$store.getters['user/id']
					this.userinfo.userName = this.$store.getters['user/userName']
					this.userinfo.userImg = this.$store.getters['user/userImg']
					this.userinfo.bgImg = this.$store.getters['user/bgImg']
					if(this.userinfo.bgImg==null){
						// this.default_bg = `${this.baseUrl}/${this.userinfo.id}/${this.userinfo.bgImg}`
						this.userinfo.bgImg = this.default_bg
					}else{
						this.userinfo.bgImg = `${this.baseUrl}/${this.userinfo.id}/${this.userinfo.bgImg}`
					}
				}else{
					this.userinfo.id = this.$route.query.userId
					this.$api.commonApi.getOtherInfo(this.userinfo.id).then((res)=>{
						if(res.status ==200&&res.data.status==200){
							this.userinfo.userImg = res.data.userImg
							this.userinfo.bgImg = `${this.baseUrl}/${this.userinfo.id}/${res.data.bgImg}`
							this.userinfo.userName = res.data.userName
						} 
					})
					
				}

			}
		},
		
		methods:{
			showUploads(){
				this.$router.push({
					path:"/personal/uploads",
					query:{
						userId:this.userinfo.id
					}
				})
			},
			showCollections(){
				this.$router.push({
					path:"/personal/collections",
					query:{
						userId:this.userinfo.id
					}
				})
			},
			toSetting(){
				this.$router.push({
					path:'/setting'
				})
			}
			
		}
	};
</script>

<style lang="less" scoped>
	.p_head{
		background-size: 100%;
		background-position: center;
		width: 100vw;
		height: 240px;
		margin-top: 100px;
		position: relative;
		div{
			display: inline-block;
			width: 150px;
			height: 150px;
			margin-top: 50px;
			img{
				width: 150px;
				height: 150px;
				border-radius: 50%;
			}
		}
	
		.changeBox{
			position: absolute;
			width: 300px;
			left: 50%;
			transform: translate(-50%);
			height: 50px;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			a{
				width: 150px;
				text-align: center;
				background-color: rgba(0,0,0,0.7);
				text-decoration: none;
				line-height: 50px;
				font-size: 20px;
				color: white;
				border: 1px solid white;
			}
		}
	}
	
	// .setBox{
	// 	position: fixed;
	// 	border: 1px solid;
	// 	top: 120px;
	// 	left: 50%;
	// 	transform: translate(-50%);
	// 	width: 500px;
	// 	height: 400px;
	// 	background-color: #404143;
	// }
</style>